Vue Js Get Data(object) from Session  Storage:To retrieve data from Session Storage in Vue.js, you can use the getItem method provided by the window.sessionStorage object. First, you need to access the stored data using the key used to store it.

How can you retrieve an object containing data stored in the Session Storage using Vue js?

This code snippet shows how to get data from session storage in Vue.js and use it in a computed property to display a list of rivers in a table.

First, a new property called isDataStored is added to the Vue instance’s data object. This property will be used to conditionally render the component based on whether there is data stored in session storage or not.

In the mounted() lifecycle hook, the isDataStored property is set to true to indicate that the component is ready to display data.

The computed property rivers() is used to retrieve the data from session storage. The getItem() method is used to retrieve the stored data, and then JSON.parse() is called to convert the JSON string back into an array of river objects.

Finally, the v-for directive is used to iterate over the rivers array and display each river’s name and length in a table row.

Note: Make sure to store the river data as a JSON string in session storage using the setItem() method before accessing it in the rivers() computed property.

Vue Js Get Data(object) from Session Storage Example

 <div id="app" v-if="isDataStored">
      <table>
            <tbody>
                <tr v-for="river in rivers" :key="river.name">
                    <td>{{ river.name }}</td>
                    <td>{{ river.length }}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data: {
                isDataStored: false // add this property
            },
            mounted() {
                this.isDataStored = true;
            },
            computed: {
                rivers() {
                    // Get the array of river objects from session storage
                    const storedRivers = sessionStorage.getItem('rivers');

                    // Parse the array from storage
                    return JSON.parse(storedRivers);
                }
            }
        })
    </script>

Output of Vue Js Get Data(object) from Session Storage